<template>
<div>
  <div style="margin:0px auto;width: 1200px;display: flex;flex-direction: column;">
    <div style="display: flex;margin: 30px 300px">
    <el-input v-model="input" placeholder="请输入内容" style="font-size: 18px">
    </el-input>
    <el-button type="primary" slot="append" style="width: 20%" @click="on_seach()">搜索</el-button></div>
    <div style="width: 100%;min-height: 750px">
      <div style="margin-top: 20px">
        <el-radio-group v-model="sortModel" size="medium" @change="on_seach()">
          <el-radio-button label="0">默认</el-radio-button>
          <el-radio-button label="1">时间</el-radio-button>
          <el-radio-button label="2">参与人数</el-radio-button>
        </el-radio-group>
      </div>
      <el-row>
        <el-col style="width: 238px;height:262px;margin: 10px auto 28px;padding: 10px"
                v-for="item in courseList" :key="item.courseId"
                :offset="item.courseId > 0 ? 2 : 0">
          <a @click="on_courseCard(item.courseId)" style="text-decoration: none;cursor:pointer;">
            <el-card :body-style="{ padding: '0px'}" style="border-radius: 12px">
              <img :src="`http://localhost:8089/upload/${item.cover}`"
                   class="k-image"/>
              <div style="height: 126px;padding: 10px 12px;position: relative;">
                <p style="font-weight: bold;color:#333333;margin: 0">{{ item.courseName }}</p>
                <p style="color:#666666;margin: 0">{{ item.schoolName }}</p>
                <p style="color: #999999;margin: 0">{{ item.userName }}</p><!--添加教师团队-->
                <p style="margin: 40px 0 0;float: right;color: #999999">{{ item.attendNum }}人参加</p>
              </div>
            </el-card>
          </a>
        </el-col>
      </el-row>
      <el-empty v-if="courseList.length===0" description="该板块没有课程哦，看看其他板块吧"></el-empty>
    </div>
    <el-pagination
        @size-change="handleSizechange"
        @current-change="getPageSeach"
        :current-page="currentPage"
        :page-sizes="[10,15,20]"
        :page-size="pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        style="text-align: center">
    </el-pagination>
  </div>
</div>
</template>

<script>
export default {
  name: "SearchView",
  data(){
    return{
      input:'',
      sortModel:'',
      courseList:[],
      currentPage: 1,
      pageSize: 10,
      total: 10,
    }
  },
  methods:{
    on_courseCard(courseId) {
      console.log(courseId);
      window.open(this.$router.resolve({path: `/courseView/${courseId}`}).href, '_blank');
    },
    handleSizechange(size) {
      this.pageSize = size;
      this.getPageSeach(1);
    },
    getPageSeach(current = 1) {
      this.currentPage = current;
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/course/getPageSearch/${this.currentPage}/${this.pageSize}/${this.input}/${this.sortModel}`,
      }).then(res => {
        this.total = res.data.dataobject.total;
        this.courseList = res.data.dataobject.pageList;
      }).catch(err => console.log(err));
    },
    on_seach(){
      if(this.input!==null&&this.input!=='') {
        this.$router.push({path: '/search', query: {input: this.input, sortModel: this.sortModel}}, () => {
        });
        this.input=this.$route.query.input
        this.sortModel=this.$route.query.sortModel
        this.getPageSeach()
      }
      else
        this.$message.warning("搜索内容不能为空")
    }
  },
  created() {
    this.input=this.$route.query.input
    this.sortModel=this.$route.query.sortModel
    this.getPageSeach()
  }
}
</script>

<style scoped>

</style>